<template>
    <div class="h-full w-full box-container lg:items-center">
      <div class="top h-1/6 px-4 lg:px-8">
        <span @click="back">
          <img src="/images/backIcon2.png" alt="" />
          <span class="text-xl lg:text-2xl">返回</span>
        </span>
        <h2 class="text-3xl font-bold lg:text-4xl">历史记录</h2>
        <!-- <span @click="toHistory">
          <span
            class="text-xl text-[#1a0dab] hover:underline decoration-[#1a0dab] lg:text-2xl"
            >历史记录</span
          >
        </span> -->
      </div>
      <div class="middle h-5/6 py-4 lg:h-4/6 xl:px-[10vw] 2xl:px-[20vw]">
        <div class="main-content h-5/6">
          <div class="search-bar h-1/6">
            <div>
              <div class="inputArea">
                <span>姓名</span>
                <div class="line"></div>
                <input
                  type="text"
                  placeholder="请输入姓名"
                  v-model="name"
                  maxlength="7"
                />
              </div>
            </div>
            <div>
              <button class="my-btn primary-btn" @click="search">搜索</button>
              <button class="my-btn" @click="reset">重置</button>
            </div>
          </div>
          <div class="history-area h-4/6">
            <div class="area-header">
              <div>姓名</div>
              <div>年龄</div>
              <div>性别</div>
              <div>创建时间</div>
              <div>查看报告</div>
            </div>
            <div class="area-centent">
              <div v-for="(item, index) in historyList" :key="index">
                <div>{{ item.name }}</div>
                <div>{{ item.age }}</div>
                <div>{{ ['未知','男','女'][item.sex] }}</div>
                <div>{{ item.created_at }}</div>
                <div class="cursor-pointer" style="color: blueviolet" @click="openReport(item)">
                  查看报告
                </div>
              </div>
              <div class="area-bottom" id="areaBottom">
                {{ loading ? "加载中..." : "没有更多了..." }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <MyAlert ref="myAlert"></MyAlert>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from "vue";
  import { useRouter } from "vue-router";
  import MyAlert from "@/components/alert/index.vue";
  import { fetchStartCheck,fetchListReport } from "@/assets/api/index.js";
  const baseUrl = import.meta.env.BASE_URL;
  
  const router = useRouter();
  
  const myAlert = ref();
  const loading = ref(false);
  const finished = ref(false);
  const pageNum = ref(1);
  const pageSize = ref(40);
  const number = ref("");
  const name = ref("");
  
  const historyList = ref([]);
  let observeIo = ''
  
  const back = () => {
    router.replace("/patient");
  };
  
  const openReport = (item) => {
  
    window.localStorage.setItem('tongue_res',item.tongue_result)
    let {origin,pathname} = window.location
    window.open(`${origin}${pathname}#/tongue_report`,'_blank')
  };
  const search = () => {
    stopObserve();
    pageNum.value = 1;
    loading.value = false;
    finished.value = false;
    historyList.value = [];
    actionObserve();
  };
  const reset = () => {
    stopObserve();
    pageNum.value = 1;
    name.value = "";
    loading.value = false;
    finished.value = false;
    historyList.value = [];
    actionObserve();
  };
  const actionObserve = () => {
    observeIo = new IntersectionObserver(getList);
    observeIo.observe(document.getElementById("areaBottom"));
  };
  const stopObserve = () => {
    let target = document.getElementById("areaBottom");
    observeIo.unobserve(target);
  };
  const getList = async (entries) => {
    if (entries[0].isIntersecting) {
      // 元素已进入视窗或容器
      // 执行相应操作
      console.log("触发进入显示");
    } else {
      // 元素已离开视窗或容器
      // 执行相应操作
      console.log("触发离开显示");
      return;
    }
  
    loading.value = true;
    let data = await getHistoryList();
    if (data.length !== 0) {
      historyList.value.push(...data);
    } else {
      finished.value = true;
    }
    loading.value = false;
  };
  const sleep = () => {
    return new Promise((resolve, reject) => {
      setTimeout(resolve, 1000);
    });
  };
  const getHistory = () => {
    //   window.location.replace("./history.html");
  };
  const showAlert = (text) => {
    //   this.dialogText = text;
    //   this.showMyDialog = true;
  };
  const getHistoryList = async () => {
    try {
      let res = await fetchListReport({
          name: name.value,
          page: pageNum.value++,
          limit: pageSize.value,
      })
      console.log(res)
      // if (res.code !== 0) {
      //   //   return this.showAlert(res.message);
      //   console.log("获取失败", res.message);
      // }
      // return res.data;
      return res.data
    } catch (e) {
      return console.log("网络错误");
    }
  };
  onMounted(() => {
    actionObserve();
  });
  </script>
  
  <style scoped>
  .box-container .top {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* padding-right: 2rem; */
  }
  
  .top h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
  }
  
  .top > span {
    font-size: 1.5rem;
    /* color: rgb(72, 72, 247); */
    cursor: pointer;
    /* margin-right: 2.5rem; */
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .top > span > img {
    width: 2rem;
    margin-right: 10px;
  }
  .middle {
    /* margin-top: 4rem; */
    /* width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center; */
  }
  
  .history-area {
        font-size: 1.2rem;
        text-align: center;
        height: 73vh;
        padding: 0 2rem;
      }
      .area-header {
        display: flex;
        height: 3.2rem;
      }
      .area-header {
        display: flex;
        padding: 1rem 0;
        border-top: 1px solid rgb(14 143 255 / 28%);
      }
      .area-header div {
        width: 25%;
        font-weight: bolder;
      }
  
      .area-centent {
        height: calc(73vh - 4rem);
        overflow-y: auto;
      }
      .area-centent > div {
        display: flex;
        padding: 1rem 0;
        border-top: 1px solid #eee;
      }
      .area-centent > div > div {
        width: 25%;
      }
      .area-bottom {
        color: #666;
        font-size: 1rem;
        justify-content: center;
      }
  
      .main-content {
        height: 85vh;
        /* background-color: gray; */
      }
  
      .main-content .search-bar {
        display: flex;
        justify-content: space-between;
        height: 12vh;
        padding: 0 2rem;
      }
  
      .search-bar > div {
        display: flex;
        align-items: flex-start;
      }
  
      .main-content .content-area {
        height: 70vh;
        display: flex;
        justify-content: space-between;
      }
      .search-bar .inputArea:first-child {
        width: 40vw;
      }
      .search-bar .inputArea:last-child {
        width: 30vw;
        margin-left: 1rem;
      }
      .inputArea >span{
          flex-shrink: 0;
      }
      .inputArea >div{
          flex-shrink: 0;
      }
      .inputArea {
        height: 3rem;
        border: 2px solid blue;
        border-radius: 4rem;
        display: flex;
  
        align-items: center;
        font-size: 1.4rem;
        /* margin: 3rem; */
        padding: 1rem;
      }
      .inputArea input {
        flex-grow: 1;
        background: none;
        border: none;
        outline: none;
        border: 60%;
        height: 3rem;
        /* position: relative;
    top: 0.2rem; */
        font-size: 1.5rem;
      }
  
      input::placeholder {
        color: gray;
        font-size: 1.4rem;
      }
  
      input:active {
        border: none;
        outline: none;
      }
  
      .inputArea .line {
        height: 2rem;
        width: 0.4rem;
        border-radius: 0.4rem;
        background-color: blue;
        margin: 0 0.5rem;
      }
      .my-btn {
        width: 10vw;
        cursor: pointer;
        border-radius: 200px;
        color: rgb(14, 143, 255);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        height: 3rem;
        font-size: 1.4rem;
        border: 1px solid rgb(14, 143, 255);
      }
      .primary-btn {
        background: linear-gradient(
          to right,
          rgb(19, 167, 255),
          rgb(14, 143, 255)
        );
        color: #fff;
      }
      .my-btn:last-child {
        margin-left: 1rem;
      }
  </style>
  